<template>
  <div ref="dom" style="width: 100%; height: 100%;">
  </div>
</template>

<script>

  import moment from 'moment';
  export default {
    name: "RingChart",
    props: ['data', 'cfg'],
    data() {
      return {
        chart: null
      }
    },
    watch: {
      data: {
        handler: function (n, o) {
          if (Object.keys(n).length > 0) this.loadChart();
        }
      }
    },
    mounted() {
      this.loadChart();
    },
    beforeDestroy() {
      this.destoryChart();
    },
    methods: {
      loadChart() {
        const data = this.data, cfg = this.cfg, echarts = this.$echarts;
        const isSmallScreen = window.screen.width < 1600;
        const option = {
          legend: {
            show: ('legendShow' in cfg) && !cfg['legendShow'] ? !!0 : !!1,
            orient: 'horizontal ',
            bottom: cfg['bottom'] || '0',
            x: 'center',
            icon: 'none',
            textStyle: {
              x: 'center',
              color: '#999',
              fontSize: isSmallScreen ? 12 : 14,
              fontWeight: isSmallScreen ? 100 : 600,
              padding: [0, 0, 3, -38],
            },
            selectedMode: false
          },
          series: [
            {
              name: "ring",
              type: "pie",
              radius: cfg['ringSize'] || ["55%", "65%"],
              center: cfg['position'] || ["50%", "40%"],
              label: {
                show: false,
              },
              itemStyle: {
                color: cfg['ringColor'] || '#1D7BFF'
              },
              data: [
                {
                  value: data.percent,
                  label: {
                    show: true,
                    color: cfg['bigColor'] || '#ddd',
                    position: "center",
                    formatter: '{big|{d}} {percent|%} \n{small|' + data.value + ' ' + (cfg['unit'] || '') + '}',
                    rich: {
                      big: {
                        fontSize: isSmallScreen ? 12 : cfg['bigFontSize'] || 14,
                        lineHeight: isSmallScreen ? 14 : cfg['bigFontSize'] + 4 || 16,
                        fontFamily: 'tapeworm',
                        color: cfg['bigColor'] || '#ddd',
                      },
                      small: {
                        fontSize: isSmallScreen ? 10 : cfg['smallFontSize'] || 12,
                        lineHeight: isSmallScreen ? 14 : cfg['smallFontSize'] + 4 || 14,
                        fontWeight: isSmallScreen ? 100 : 600,
                        fontFamily: 'tapeworm',
                        color: cfg['smallColor'] || 'rgba(27,243,222,.6)'
                      },
                      percent: {
                        fontSize: isSmallScreen ? 10 : 12
                      },
                    }
                  }
                },
                {
                  value: 100 - data.percent,  // 计算剩下没加载的进度
                  name: data['name'],
                  itemStyle: {
                    color: cfg['leftRingColor'] || "rgba(19, 45, 83, 1)"
                  },
                },
              ],
            },
            {
              name: "",
              type: "pie",
              radius: cfg['ringSize2'] || ["70%", "75%"],   //大小
              center: cfg['position'] || ["50%", "40%"],
              label: {
                show: false,
              },
              color: cfg['outRingColor'] || "rgba(19, 45, 83, 1)",
              data: [100]
            }
          ],
        };

        this.chart = echarts.getInstanceByDom(this.$refs.dom);
        if (this.chart) {
          // chart.clear();
          // chart && chart.dispose();
        } else {
          this.chart = echarts.init(this.$refs.dom, 'macarons');
        }
        this.chart.setOption(option, true);
        window.onresize = this.chart.resize;
      },
      destoryChart() {
        this.chart && this.chart.clear();
        this.chart && this.chart.dispose();
        this.chart = null;
      }
    }
  }
</script>

<style scoped>

</style>
